<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
    </head>
    <body>
        <div align="center">
        <h4>同学，你好！</h4>
        <input type="button" onclick="showPro()" value="输入框弹窗按钮"/>
        <input type="button" onclick="showAlert2()" value="提示弹窗按钮"/>
        <input type="button" onclick="showAlert()" value="确认弹窗按钮"/><br><br><br>
        <span id="textSpan"></span>
        
        </div>
    </body>
    <script>
        function showAlert(){            
            document.getElementById("textSpan").innerHTML="";
            if(confirm("你可爱吗？")){
                document.getElementById("textSpan").innerHTML="<font style='color: red;'>您为何如此自信？</font>";
            }else{
                document.getElementById("textSpan").innerHTML="<font style='color: red;'>您为何如此谦虚？</font>";
            }
            
        }
        function showPro(){
            document.getElementById("textSpan").innerHTML="";
            con = prompt("请输入1或2！");
            if(con==1){
                document.getElementById("textSpan").innerHTML="<font style='color: green;'>这位同学，真聪明啊</font>";
            }else if(con==2){
                document.getElementById("textSpan").innerHTML="<font style='color: green;'>这位同学，你还要再努力啊</font>";
            }else{
                document.getElementById("textSpan").innerHTML="<font style='color: red;'>您没有按要求输入，请重新输入</font>";
            }
        }
        function showAlert2(){
            document.getElementById("textSpan").innerHTML="";
            alert("学习让你多一条选择的路！");
        }
    </script>
</html>